<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用详情</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>
<style>
    .addon_con {
        display: flex;
        padding: 15px 20px;
    }

    .right_con {
        width: 300px;
        border-left: 1px solid #f5f5f5;
        margin-left: 10px;
        padding-left: 10px;
    }

    .addon_con .left_con .header {
        display: flex;
        align-items: center;
    }

    .addon_con .left_con .header .imgs {
        width: 400px;
        margin-right: 20px;
    }

    .addon_title {
        font-size: 20px;
        font-weight: bold;
    }

    .addon_desc {
        font-size: 12px;
        color: #ccc;
        padding-top: 5px;
        padding-bottom: 15px;
    }

    .addon_tags .status_con {
        margin: 0 6px 6px 0;
        height: 20px !important;
        line-height: 20px !important;
    }

    .addon_item {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 5px 0;
    }

    .addon_item div:first-child {
        color: #909399;
        width: 80px;


    }

    .addon_item div:last-child {
        color: #606266;
    }

    .addon_item .price {
        font-size: 16px;
        color: #f56c6c !important;
    }

    .addon_item a {
        color: #409eff;
    }

    .left_con .content .title {
        color: #409eff;
        font-size: 18px;
        font-weight: bold;
        margin: 15px 0 15px 0;
    }

    .addon_button {
        margin-top: 10px;
    }

    .addon_button button {
        margin-right: 5px;
    }

    .version_con .layui-card {
        border: 1px solid #f4f4f4;
        border-radius: 4px
    }

    .version_con .layui-card-header {
        font-size: 20px;
        font-weight: bold;
        padding: 8px 20px;
    }

    .version_con .version_time {
        margin-bottom: 8px;
        color: #909399;
        font-size: 13px;


    }

    .imgs .img_con {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }

    .imgs .img_con img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 1;
        vertical-align: top;
        cursor: pointer;
    }

    .author_info_con {
        background: #f9f9f9;
        padding: 10px;
    }

    .author_info {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;

    }
    .developer_name{
        flex: 1;
        margin-left: 15px;
    }
    .developer_name p:first-child {
        font-weight: bold;
        font-size: 16px;

    }

    .developer_name p:last-child {
        font-size: 12px;
        color: #909399;
        padding-top: 5px;
    }

    .author_addon {
        margin-top: 15px;
    }

    .author_addon_item {
        display: flex;
        align-items: center;
        margin: 4px 0;
        cursor: pointer;
        padding: 6px;
    }

    .author_addon_item:hover {
        background: #f9f9f9;
        border-radius: 10px;
    }

    .author_addon_img {
        width: 50px;
        border-radius:5px;
        height: 50px;
        background: #f9f9f9;
    }

    .author_addon_img img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    .author_addon_title {
        margin-left: 6px;
        flex: 1;
    }

    .author_addon_title p:first-child {
        font-size: 14px;
        font-weight: bold;

    }

    .author_addon_title p:last-child {
        font-size: 12px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 20px;
    }

    .author_addon .title {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }
    .developer_avatar{
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .developer_avatar img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
</style>
<body>

<div class="view_body"></div>
<script type="text/html" id="view_body_data">
    <div class="addon_con">
        <div class="flex_1 left_con">
            <div class="header">
                <div class="imgs">
                    <div class="layui-carousel" id="carousel">
                        <div carousel-item>
                            {{# layui.each(d.imgs, function(index, item){ }}
                            <div class="img_con"><img src="{{item}}"></div>
                            {{# }); }}
                        </div>
                    </div>
                </div>
                <div class="flex_1">
                    <div class="addon_title">{{d.name}}</div>
                    <div class="addon_desc">{{d.intro}}</div>
                    <div class="addon_tags">
                        {{# layui.each(d.tags, function(index2, item2){ }}
                        <span class="status_con bg_color_{{index2}}">{{item2}}</span>
                        {{# }); }}
                    </div>
                    <div class="addon_item">
                        <div>价格</div>
                        <div class="price">{{# if(d.type== 2){ }}￥{{# } }}{{d.sale_price || '免费'}} {{# if(d.type== 1){
                            }}积分{{# } }}
                        </div>
                    </div>
                    <div class="addon_item">
                        <div>最后更新</div>
                        <div>{{d.update_time}}</div>
                    </div>
                    <div class="addon_item">
                        <div>发布时间</div>
                        <div>{{d.create_time}}</div>
                    </div>
                    <div class="addon_item">
                        <div>模块分类</div>
                        <div>{{d.cat}}</div>
                    </div>
                    <div class="addon_item">
                        <div>演示地址</div>
                        <div>{{# if(d.demo_url){ }}<a href="{{d.demo_url}}" target="_blank">点击访问</a>{{# } else { }}暂无{{#
                            } }}
                        </div>
                    </div>
                    <div class="addon_item">
                        <div>文档地址</div>
                        <div>{{# if(d.doc_url){ }}<a href="{{d.doc_url}}" target="_blank">点击访问</a>{{# } else { }}暂无{{# }
                            }}
                        </div>
                    </div>
                    <div class="addon_button">
                        {{# if(d.down_version){ }}
                        {{# if(d.local.install==1){ }}
                        <button class="pear-btn pear-btn-primary pear-btn-sm" onclick="Install('{{d.num}}')">安装</button>
                        {{# } }}
                        {{# if(d.local.install==2){ }}
                        <button class="pear-btn pear-btn-sm btn_theme_2" onclick="Uninstall('{{d.num}}')">卸载</button>
                        {{# } }}
                        {{# if(d.local.version){ }}
                        <button class="pear-btn pear-btn-sm btn_theme_0 layui-btn-disabled">已下载{{d.local.version}}
                        </button>
                        {{# } }}
                        {{# if(d.local.version!=d.version[0].version){ }}
                        <button class="pear-btn pear-btn-primary pear-btn-sm" onclick="download('{{d.id}}')">
                            {{# if(d.local.version){ }}升级模块{{# } else { }}下载安装{{# } }}
                        </button>
                        {{# } }}
                        {{# } else { }}
                        <button class="pear-btn pear-btn-primary pear-btn-sm" onclick="download('{{d.id}}')">
                            购买模块
                        </button>
                        {{# } }}
                    </div>
                </div>
            </div>
            <div class="content">
                <p class="title">介绍</p>
                <p class="desc">{{d.content || '暂无介绍'}}</p>
            </div>
            <div class="content">
                <p class="title">更新日志</p>

                <div class="layui-timeline">
                    {{# layui.each(d.version, function(index, item){ }}
                    <div class="layui-timeline-item version_con">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <div class="version_time">{{item.update_time}}</div>
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    {{item.version}}
                                </div>
                                <div class="layui-card-body">{{item.content}}</div>
                            </div>
                        </div>
                    </div>
                    {{# }); }}
                </div>
            </div>
        </div>
        <div class="right_con">
            <div class="author_info_con">
                <div class="author_info">
                    <div class="developer_avatar">
                        <img src="{{d.author_info.avatar || '/static/img/avatar.png'}}">
                    </div>
                    <div class="developer_name">
                        <p>{{d.author_info.nickname || '官方'}}</p>
                        <p>应用开发者</p>
                    </div>
                </div>

                <div class="addon_item">
                    <div>联系QQ</div>
                    <div>{{d.author_info.qq_num || '无'}}</div>
                </div>
                <div class="addon_item">
                    <div>联系微信</div>
                    <div>{{d.author_info.wechat_num || '无'}}</div>
                </div>
                <div class="addon_item">
                    <div>联系手机</div>
                    <div>{{d.author_info.phone || '无'}}</div>
                </div>
            </div>
            <div class="author_addon">
                <div class="title">TA的更多应用</div>
                {{# layui.each(d.author_info.addon, function(index, item){ }}
                <div class="author_addon_item" onclick="info('{{item.id}}')">
                    <div class="author_addon_img"><img src="{{item.imgs}}"></div>
                    <div class="author_addon_title">
                        <p>{{item.name}}</p>
                        <p>{{item.intro}}</p>
                    </div>
                </div>
                {{# }); }}
            </div>
        </div>
    </div>
</script>
<script>
    let shopUrl='{:GetConfig('system','shop_url')}';
</script>
<script src="/static/js/common/shop/config.js?t={:time()}"></script>
<script src="/static/js/common/shop/detail.js?t={:time()}"></script>
</body>
</html>